import { Button, Form, Input, Switch, PageHeader, message} from 'antd';
import { useForm } from 'antd/lib/form/Form';
import { useEffect, useState } from 'react';
import { Loading } from "../../../component/loading";
import { getProject, modProject } from "../vo/request";
import { projectData } from "../vo/vo";

// const { Option } = Select;

export const ProjectSetting = function () {
    const [projectData, setProjectData] = useState({} as projectData);
    const [loading, setLoading] = useState(true);
    const [saveLoading, setSaveLoading] = useState(false);
    const [form] = useForm();
    useEffect(() => {
        (async () => {
            let projectId = parseInt(sessionStorage.getItem("project") as string);
            let projectRes = await getProject(projectId);
            if (!projectRes.code) {
                setProjectData(projectRes.data);
                form.setFieldsValue(projectRes.data);
                setLoading(false);
            } else {
                message.error(projectRes.msg)
            }
        })()
    }, []);
    const onFormFinish = async (v: any) => {
        setSaveLoading(true);
        try {
            v.projectId = parseInt(sessionStorage.getItem("project") as string);
            let res = await modProject(v);
            if(!res.code && res.data) {
                message.success(res.msg);
            } else {
                message.error(res.msg);
            }
        } catch(err) {
            message.error("未知错误，见控制台");
        } finally {
            setSaveLoading(false)
        }
        
    }
    const { TextArea } = Input;
    return (
        <>
            {loading ?
                <Loading
                    style={{
                        position: "absolute",
                        top: "50%",
                        left: "50%",
                        transform: "translate(-50%, -50%)",
                    }}
                    className="loading"
                    size={30}
                    color="#096dd9"
                /> :
                <div>
                    <PageHeader title={<div style={{ fontSize: 30 }}>{projectData.projectName}</div>} ></PageHeader>
                    <Form
                        labelCol={{ span: 3, offset: 2 }}
                        wrapperCol={{ span: 16 }}
                        form={form}
                        style={{ marginTop: 30 }}
                        onFinish={onFormFinish}
                    >
                        <Form.Item
                            name="projectName"
                            label="项目名称"
                            rules={[{
                                required: true,
                                message: " "
                            }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            name="projectPath"
                            label="主路径"
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            name="mockpath"
                            label="mock地址"
                        >
                            <Input disabled placeholder="www.o8tv.com" />
                        </Form.Item>
                        <Form.Item
                            name="description"
                            label="描述"
                        >
                            <TextArea autoSize={{ minRows: 2 }} />
                        </Form.Item>
                        <Form.Item
                            name="messageSwitch"
                            label="消息开关"
                        >
                            <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked />
                        </Form.Item>
                        <Form.Item
                            name="projectCreateTime"
                            label="创建时间"
                        >
                            <Input bordered={false} style={{color: "#000", cursor: "unset"}} disabled></Input>
                        </Form.Item>
                        <Form.Item
                            name="projectLastUpdateTime"
                            label="上次更改时间"
                        >
                            <Input bordered={false} style={{color: "#000", cursor: "unset"}} disabled></Input>
                        </Form.Item>
                        <Form.Item colon={false} className="button" label=" " labelCol={{ span: 12 }} wrapperCol={{ span: 10 }}>
                            <Button loading={saveLoading} type="primary" htmlType="submit">保存</Button>
                        </Form.Item>
                    </Form>
                </div>
            }
        </>



    )
}


